﻿<template>
   <div class="l-tab-page" style="padding:8px;" >
      <div class="l-rblock l-my-page" >
        <el-tabs tab-position="left" :stretch="true" v-model="activeName">
            <el-tab-pane label="收件箱" name="first" :key="'first'">  
              <inbox v-if="activeName == 'first'"></inbox>  
            </el-tab-pane>
            <el-tab-pane label="草稿箱"  name="second" :key="'second'">
                <drafts  v-if="activeName == 'second'"></drafts>
            </el-tab-pane>
            <el-tab-pane label="已发送"  name="third" :key="'third'">
               <sent v-if="activeName == 'third'"></sent>
            </el-tab-pane>
            <el-tab-pane label="已删除"  name="fourth" :key="'fourth'">
              <deleted  v-if="activeName == 'fourth'" ></deleted>
            </el-tab-pane>
        </el-tabs>
      </div>
  </div>
</template>

<script>
  import inbox from './inbox.vue'
  import drafts from './drafts.vue'
  import sent from './sent.vue'
  import deleted from './deleted.vue'
  export default {
  components: {
    inbox,
    drafts,
    sent,
    deleted,
  },
  data() {
    return {
      activeName: 'first'
    };
  },
  methods: {     
  }
}
</script>
